<template>
	<view class="container">
		<!-- <u-navbar title="" @leftClick="goreturn" :autoBack="true"></u-navbar> -->
		<view class="flexcenter" style="margin-top: 100rpx;">
			<image src="@/static/logo.png" style="width: 440rpx;height: 400rpx;" mode=""></image>
		</view>
		<view class="name flexcenter"> 找回登錄密碼 </view>
		<view class="item">
			<view class="left">手機號</view>
			<view class="shu"> | </view>
			<input type="number" v-model="mobile"  placeholder-style="color:#999" class="ipt"
				placeholder="請輸入已註冊的手機號" />
		</view>
		<!-- 驗證碼 -->
		<view class="item">
			<view class="left">驗證碼</view>
			<view class="shu"> | </view>
			<input type="text" v-model="captcha" maxlength="12" class="ipt" placeholder-style="color:#999"
				placeholder="請輸入驗證碼" />
			<view class="get-code" v-if="codeTime == 60" @click="getCode">獲取驗證碼</view>
			<view class="get-code" v-else>{{ codeTime }}s後重新發送</view>
		</view>
		<view class="item">
			<view class="left">密碼</view>
			<view class="shu"> | </view>
			<input type="password" v-model="newpassword" maxlength="12" class="ipt" placeholder-style="color:#999"
				placeholder="請輸入新密碼(6-12位)" />
		</view>
		<view class="btn" @tap="userLogin">完成</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isClick: true,
				mobile: "", //帳號
				captcha: "", //驗證碼
				newpassword: "", //密碼
				codeTime: 60, //倒計时時間
				codetext:"",
			};
		},
		onLoad() {},
		methods: {
			goreturn() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 獲取驗證碼
			getCode() {
				if (!this.mobile) {
					this.http.toast("請輸入手機號！")
					return false
				}
				if (this.isClick) {
					this.isClick = false;
					let data = {
						mobile: this.mobile,
						event:"resetpwd"
					};
					this.http.request("/api/sms/fs", 'POST', data).then((res) => {
						if (res.code == 1) {
							this.downTime();
							uni.showToast({
								title: "發送成功",
								icon: "none",
							});
							this.codetext = res.data
						} else {
							this.isClick = true;
							uni.showToast({
								title: res.msg,
								icon: "none",
							});
						}
					});
				}
			},
			// 發送驗證碼倒計时
			downTime() {
				if (this.codeTime == 0) {
					this.codeTime = 60;
					this.isClick = true;
					return;
				} else {
					this.codeTime--;
					this.isClick = false;
					setTimeout(() => {
						this.downTime();
					}, 1000);
				}
			},
			// 點擊重置按钮
			userLogin() {
				this.codeLogin();
			},
			// 改正
			async codeLogin() {
				// if (!this.mobile.match(/^1\d{10}$/)) {
				// 	this.http.toast("請輸入正确的手機號碼！")
				// 	return false
				// }
				if (!this.captcha) {
					this.http.toast("請輸入驗證碼！")
					return false
				}
				if (!this.newpassword) {
					this.http.toast("請輸入新密碼！")
					return false
				}
				let res=await this.http.request('/api/user/resetpwd', 'POST', {
					mobile: this.mobile,
					captcha:this.captcha,
					newpassword:this.newpassword,
				})
				if (res.code == 1) {
					this.http.toast(res.msg);
					setTimeout(() => {
						uni.navigateBack(1)
					}, 1000)
				}else{
					this.http.toast(res.msg);
				}
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		position: relative;
		overflow: hidden;
	}

	.login-bg {
		width: 750rpx;
		height: 441rpx;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	.name {
		text-align: left;
		margin: 30px;
		font-size: 38rpx;
		font-weight: 550;
	}

	// 每個form项
	.item {
		width: 670rpx;
		height: 120rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		overflow: hidden;
		line-height: 120rpx;
		border-bottom: 1px solid #f7f9fa;

		.shu {
			color: #f7f9fa;
		}

		.left {
			width: 130rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}

		.text {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 33rpx;
			color: #333;
			opacity: 1;
			margin-left: 35rpx;
		}

		.ipt {
			margin-left: 16rpx;
			flex: 1;
			border: 0 none;
			font-size: 32rpx;
			font-weight: 400;
		}

		.icon {
			position: absolute;
			right: 0;
			top: 2rpx;
			bottom: 33rpx;
			width: 38rpx;
			height: 38rpx;
		}

		.get-code {
			position: absolute;
			right: 35rpx;
			z-index: 999;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50rpx;
			text-decoration: underline;
			color: #FFB800;
		}
	}

	// 註冊按钮
	.register-box {
		display: flex;
		justify-content: flex-end;
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;

		.register-btn {
			font-size: 24rpx;
			font-weight: 500;
			height: 100%;
		}
	}

	// 登錄按钮
	.btn {
		margin: 100rpx auto 0;
		width: 670rpx;
		height: 95rpx;
		background: #FFB800;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		line-height: 95rpx;
		color: #000000;
	}
</style>